<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    js事件-->
<!--    <button onclick="函数(参数)"></button>-->
{{name}}
    <!--vue事件-->
    <button @click="show(66)">点我</button>
    <button @click="show1">点我</button>

    <hr>
    <!--提供了事件修饰符 针对事件进行处理
    Vue中的事件：@事件名  事件名常用的和js一直 submit change blur focus mouseover mouseout....
    prevent：阻止标签的默认行为
    once 事件只会执行一次
    stop 阻止事件冒泡
    -->
    <a href="http://www.baidu.com" @click.prevent="show(999)">点我执行自己的函数</a>
    <span  @click.once="show(999)">点我执行自己的函数</span>

    <div style="width: 100px; height: 100px; background-color: red;" @click="show(666)">
        <button @click.stop="show(888)">按钮</button>
    </div>

</div>

</body>
</html>
<script>

    new Vue({
        el:'#app',
        data(){
            return{
                name:'值'
            }
        },
        //配置Vue中的函数
        methods:{
            //定义了一个函数
           show(a) {
               //通常会做很多的操作 需要使用到Vue中的各个参数
                this.name='我是数据库查询的值';
                alert('你好'+a)
               console.log(this)
            },
            show1() {
                alert('你好')
            }
        }
    });
</script>